<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="/templates/TemplateBasic.xhtml">
	
	
	<ui:define name="content">

	
<h:form id="form"> 
                	<p:growl id="msgs" />
                	 <p:panel header="Crear una nueva Categoria" >
                    <h:panelGrid columns="2" id="grid">
                        <h:outputLabel value="Nombre: *" for="nombre"/>
                        <h:inputText id="nombre" value="#{categoriaBean.categoria.nombre}" required="true" requiredMessage="Campo [nombre] es Obligatorio!" size="30"/>
                        
                        <p:commandButton value="Reset" type="reset"/>  
            			<p:commandButton value="Agregar" update="categoriaList msgs @parent"  
                            action="#{categoriaBean.reinit}" >  
                <p:collector value="#{categoriaBean.categoria}"   
                            addTo="#{categoriaBean.categoriaList}" />  
            </p:commandButton>  
        </h:panelGrid>  
    </p:panel>  
                    <p:ajaxStatus style="width:16px;height:16px;">  
        <f:facet name="start">  
            <h:graphicImage value="../design/ajaxloading.gif" />  
        </f:facet>  
          
        <f:facet name="complete">  
            <h:outputText value="" />  
        </f:facet>  
    </p:ajaxStatus>  
         
			
<p:outputPanel id="categoriaList" />  
        <p:dataTable value="#{categoriaBean.categoriaList}" var="categoria" >  
  <f:facet name="header">  
             Lista de Categorias 
        </f:facet>
        
		<p:column >   
                <f:facet name="header">   
                        <h:outputText value="Id" /> 
     					 </f:facet>  
                   <h:outputText value="#{categoria.id}" />   
        </p:column>  
                           
          <p:column>   
                <f:facet name="header">   
                        <h:outputText value="Nombre" /> 
     					 </f:facet>  
                   <h:outputText value="#{categoria.nombre}" />   
        </p:column>  
               
		<p:column>   
                <f:facet name="header">   
                        <h:outputText value="Estado" /> 
     					 </f:facet>  
                   <h:outputText value="#{categoria.estado}" />   
        </p:column>  
                     <p:column>  
                <f:facet name="header">  
                    <h:outputText value="Operation" />  
                </f:facet>  
                <p:commandLink value="Remove" update="form:categoriaList" process="@this">  
                    <p:collector value="#{categoria}"  
                                 removeFrom="#{categoriaBean.categoriaList}" />  
                </p:commandLink>  
            </p:column>  
  

          
                    
  
                </p:dataTable>  
             
                </h:form>
           
     </ui:define>
</ui:composition>
    